<template>
  <div>
    <a-col :span="16" class="left" style="padding:20px; box-sizing:border-box;">
      <a-spin :spinning="loading">
        <a-table
          bordered
          :columns="columns"
          :pagination="ipagination"
          :data-source="dataSource"
          rowKey="orderNum"
          style="margin-top: 36px"
          @change="handleTableChange"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="TimeDeal" slot-scope="text, record">
            {{ timeFormat(record.createTime, 'yyyy/MM/dd hh:mm:ss') }}
          </span>
          <span slot="action" slot-scope="text, record">
            <a-button type="primary" @click="check(record)" style="margin-right: 6px">
              查看
            </a-button>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
          </span>
        </a-table>
      </a-spin>
    </a-col>
    <a-col :span="8" class="right">
      <a-card :bordered="false" style="background:none;">
        <h3>基本信息</h3>
        <a-row type="flex" justify="space-between">
          <p>注册手机号</p><p class="des">{{ detail.userPhone }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务代码</p><p class="des">{{ detail.serviceCode }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务名称</p><p class="des">{{ detail.serviceName }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>订阅状态</p><p class="des">{{ ['未开通','开通中','开通成功','开通失败'][detail.activeStatus] }}</p>
        </a-row>

      </a-card>
    </a-col>
  </div>
</template>
<script>
import { axios } from '@/utils/request'
export default {
  name: 'ModelManage',
  components: {

  },
  data () {
    const _self = this
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      other: '',
      loading: false,
      detail: {},
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dataSource: [],
      columns: [
        {
          title: '订单编号',
          dataIndex: 'orderNum',
          align: 'center',
          width: 150
        },
        {
          title: '充值类型',
          dataIndex: 'serviceType',
          align: 'center',
          width: 90,
          customRender: text => text ? ['直冲', '兑换码'][text] : '-'
        },
        {
          title: '充值状态',
          dataIndex: 'activeStatus',
          align: 'center',
          width: 90,
          customRender: text => ['未开通', '开通中', '开通成功', '开通失败'][text]
        },
        {
          title: '操作时间',
          dataIndex: 'activeTime',
          align: 'center',
          customRender: text => text ? _self.timeFormat(text, 'yyyy-mm-dd hh:mm:ss') : '-'
        }
      ]
    }
  },
  props: {
    state: {
      type: String,
      default: 'add'
    },
    timeFormat: {
      type: Function,
      default: null
    }
  },
  computed: {
  },
  watch: {

  },
  mounted () {

  },
  methods: {
    onClose () {
      this.$emit('closedrawer')
      this.resetForm()
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    getDetail (record) {
      this.loading = true
      this.detail = record
      axios.get('/service-sale/member/order/listByPhoneAndService', { params: { serviceCode: record.serviceCode, userPhone: record.userPhone } }).then(data => {
        console.log(data)
        this.loading = false
        this.ipagination.total = data.totalCount
        this.dataSource = data.data
      })
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    showInfo (info, title) {
      this.$info({
        title: title,
        content: info,
        onOk () {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
.left,.right {
  top: 54px;
  left: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
}
.right {
  left: auto;
  right: 0;
  background: #f0f0f0;
  h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    &::before {
      content: '';
      background: #4388A6;
      width: 6px;
      height: 16px;
      display: inline-block;
      position: relative;
      top: 2px;
      margin-right: 6px;
    }
  }
  p {
    font-size: 14px;
    color: #333;
    line-height: 36px;
    &.des {
      opacity: 0.75;
    }
  }
}
</style>
